<template >
    <div class="box">
        <div class="content">
            <div class="courseCon w1200">
                <div class="router">
                    <span>首页</span>&nbsp;&gt;&nbsp;
                    <a v-if="courseDetailsData.config&&courseDetailsData.config.name" @click = "toPage('','course')">{{ courseDetailsData.config?courseDetailsData.config.name:'' }}</a><span v-if="courseDetailsData.config&&courseDetailsData.config.name">&nbsp;&gt;&nbsp;</span>
                    <span class="commodity-name">{{ courseDetailsData.name }}</span>
                </div>
                <div class="commodityInfo">
                    <div class="commodityImg">
                        <img :src="courseDetailsData.image" style="height:100%">
                    </div>
                    <div class="commodityInfoR">
                        <h4 style="margin-bottom:20px;">
                            {{ courseDetailsData.name }}
                        </h4>
                        <!-- <div class="baoming"><span class="bmrs">1</span>学员已报名</div> -->
                        <div class="price">￥
                            <b>
                               {{ courseDetailsData.price }}
                            </b>
                        </div>
                        <div class="btns">
                            <a  class="rightBm">立刻报名</a>
                        </div>
                    </div>
                </div>
                <div class="courseMain">
                    <div class="cMTab">
                        <p>课程详情</p>
                    </div>
                    <div class="cMCon" v-if="!courseDetailsData.content">
                        
                    </div>
                    <div class="" v-if="courseDetailsData.content" style="width: 100%;padding: 30px; box-sizing: border-box;margin: 0 auto;"  v-html="courseDetailsData.content">
                    

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import pagePublic from "@/mixins/pagePublic.js";
import { mapMutations, mapState } from "vuex";
export default {
    name: "tem",
    mixins: [pagePublic],
    data() {
        return {
            courseDetailsData: {},
            // urls:{
            //     list: {
            //         url:this.$api.tem.list,
            //         method:"get",
            //         sync:false,
            //     },
            //     add:this.$api.tem.add,
            //     edit:this.$api.tem.edit,
            //     del:this.$api.tem.del
            // },


        }
    },
    computed: {
        ...mapState(['configInfo']),

    },
    created() {
        this.getData();
    },
    methods: {
        ...mapMutations(['set_configInfo']),
        getData() {
            this.$api.goodsDetails({ goods_id: this.$route.query.id }).then(res => {
                this.courseDetailsData = res.data || {}
                console.log(this.courseDetailsData)
            })
        },
    }
}
</script>
<style lang="scss" scoped>
/*通用标签选择*/
.courseCon{padding:30px 0; min-height:656px;}

/*一级栏目*/
.courseCon .navigation{background: #fff; border-radius: 6px; padding:10px 0; width: 100%;}
.courseCon .navigation div{padding:10px 0;}
.courseCon .navigation div:after{clear:both; height:0; visibility:hidden; font-size:0; display:block; content:"";}
.courseCon .navigation .name {float: left; margin-right: 10px; margin-left: 15px; line-height: 28px; color: #818a92; padding: 2px 0;}
.courseCon .navigation .item {line-height: 32px;}
.courseCon .navigation .item a{display: inline-block; margin-right: 25px; color: #242930; padding: 0 15px;}
.courseCon .navigation .item a.choose, .courseCon .navigation .item a:hover { color: var(--bg-color,'#FF6900'); background: #f5f6f6; border-radius: 3px; }
/*课程 - 路径*/
.router{margin-bottom: 20px; }
.router,.router a{ color: #818a92; }
.router .commodity-name{ color: var(--bg-color,'#FF6900'); }
/*课程 - 介绍*/
.commodityInfo{ background: #fff; border-radius: 6px; padding: 15px 2%; color: #323232; font-size: 14px; margin-bottom: 16px; }
.commodityInfo:after{clear:both; height:0; visibility:hidden; font-size:0; display:block; content:"";}
.commodityInfo .commodityImg {width: 300px; height: 212px; margin-right: 32px; border-radius: 6px; overflow: hidden; float: left;  }
.commodityInfo .commodityImg img{width: 100%; border-radius: 6px;}
.commodityInfoR h4{font-size: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 18px;}
.commodityInfoR .baoming{color: #818a92; font-size: 14px; margin: 22px 0;}
.commodityInfoR .baoming span{ color: var(--bg-color,'#FF6900'); margin-right: 6px;}
.commodityInfoR .price{color: var(--bg-color,'#FF6900');}
.commodityInfoR .price b{font-size: 24px;}
.commodityInfoR .btns{margin-top: 18px}
.commodityInfoR .btns a{display: inline-block; width: 120px; height: 42px; line-height: 42px; border-radius: 2px; text-align: center; cursor: pointer;}
.commodityInfoR .btns a.rightBm{color: #fff; background:var(--bg-color,'#FF6900');}
.commodityInfoR .btns a.selectKb{border: 1px solid var(--bg-color,'#FF6900'); color: var(--bg-color,'#FF6900'); margin-left: 20px;}
.commodityInfoR .btns a:hover{opacity: .8;}
/*课程-版型内容介绍*/
.courseMain{background: #fff; border-radius: 6px; width: 96%; padding: 0 2%;}
.courseMain .cMTab{border-bottom: 1px solid #e8e8e8;}
.courseMain .cMTab p{ color: var(--bg-color,'#FF6900'); font-weight: bold; padding: 26px 20px 16px; font-size: 20px; border-bottom: 2px solid var(--bg-color,'#FF6900'); display: inline-block; position: relative; top: 1px;}
.courseMain .cMCon{width: 100%; min-height: 290px; padding-top: 36px; background: url(../../assets/image/child_zwt.png)no-repeat center center;}
.courseMain .cMCon img{width: 100%; display: block; margin: 0 auto; border-radius: 12px;}
</style>